<template>
  <div :class="{
    'center-part': true,
    'center-part-dark': isDarkTheme,
    'center-part-light': !isDarkTheme

  }">
    <div class="center-part-title">
      <div>
        <!-- 类型: -->
        <div
           :class="{
            'center-part-type': true,
            'active': activeType === index
          }"
          v-for="(item, index) in typeList"
          @click="handleTypeClick(item, index)"
        >{{ item }}</div>
      </div>
      <div>
        <!-- 时间范围: -->
        <div
          :class="{
            'center-part-type': true,
            'active': activeTime === index
          }"
          v-for="(item, index) in timeList"
          @click="handleTimeClick(item, index)"
        >{{ item }}</div>
      </div>
    </div>
    <CustomTitle
      :title="title"
      :pageConfig="pageConfig"
    />
    <div class="subtitle">
      <span>退单量</span>
      <div style="display: flex; align-items: baseline;">
        退单总量：
        <span class="totalNum">{{ total }}</span>
        单
      </div>
    </div>
  </div>
</template>


<script>
import CustomTitle from '../components/CustomTitle.vue';

export default {
  props: {
    pageConfig: Object
  },
  components: {
    CustomTitle,
  },

  data() {
    return {
      title: '处理质量',
      typeList: ['初审', '制证'],
      timeList: ['今日', '本月', '本季', '本年'],
      activeType: 0,
      activeTime: 0,
      total: 1000,
    }
  },
  computed: {
    isDarkTheme () {
      return !!this.pageConfig.isDarkTheme
    }
  },
  methods: {
    handleTypeClick(item, index) {
      this.activeType = index;
    },
    handleTimeClick(item, index) {
      this.activeTime = index;
    }

  }

}
</script>
<style lang="less" scoped>
  .center-part {
    height: 100%;
    width: 100%;
    color: #fff;
    .center-part-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      div {
        display: flex;
        font-size: 12px;
        align-items: center;
      }

    }
    .center-part-type {
      width: 50px;
      height: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .subtitle {
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 1vw 0 1.5vw;
      span {
        font-size: 18px;
        font-family: "YouSheBiaoTiHei";
        text-shadow: 0 0 16px #3c98ff61;
      }
      div {
        font-size: 14px;
        display: flex;
        align-items: center;
      }
      .totalNum {
        font-size: 18px;
        font-weight: 500;
        text-shadow: 0 0 8px #f5e74f80;
        font-family: "TCloudNumber";
        letter-spacing: 0.8px;
        background: linear-gradient(180deg, #FFF 32.93%, #F5E74F 82.93%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
  .center-part-dark {
    color: #fff;
    .center-part-type {
      background: url('../css/btn-bg-dark.png') no-repeat;
      background-size: 100% 100%;
    }
    .center-part-type.active {
      background: url('../css/btn-bg-dark-active.png') no-repeat;
      background-size: 100% 100%;
    }
    .subtitle {
      background: url('../css/subTitle-bg-dark.png') no-repeat;
      background-size: 100% 100%;
    }
  }
  .center-part-light {
    color: #333;
    .center-part-type {
      background: url('../css/btn-bg-dark.png');
    }
  }


  // 2K
@media screen and (max-width: 2560px) {
  .center-part {
    .center-part-title {
      div {
        font-size: 18px;
        align-items: center;
      }
    }
    .center-part-type {
      width: 80px;
      height: 30px;
    }
    .subtitle {
      height: 40px;
      span {
        font-size: 20px;
      }
      div {
        font-size: 20px;
      }
      .totalNum {
        font-size: 36px;
      }
    }
  }
  
}
// 全高清屏幕
@media screen and (max-width: 1920px) {
  .center-part {
    .center-part-title {
      div {
        font-size: 12px;
        align-items: center;
      }
    }
    .center-part-type {
      width: 50px;
      height: 25px;
    }
    .subtitle {
      height: 30px;
      span {
        font-size: 16px;
      }
      div {
        font-size: 14px;
      }
      .totalNum {
        font-size: 18px;
      }
    }
  }
}
</style>